import React, { useEffect, useState } from 'react'
import { Empty, Button, NavBar } from 'react-vant';
import { Recommendlist, CarList, Selectone, Selectall, Updatenum, DEL } from '../../axios';
import { SwipeCell, Flex, Image, Typography, Checkbox, SubmitBar } from 'react-vant';
import { useNavigate } from 'react-router-dom';
import './car.css'
import { useSelector } from 'react-redux';
import { Toast } from 'antd-mobile';
export default function Car() {
  let { userId } = useSelector(state => state.user)
  let [data, setData] = useState([])
  let [catList, setCarList] = useState([])
  let [isShow, setIsShow] = useState(false)
  let [price, setPrices] = useState(0)
  let navigate = useNavigate()
  useEffect(() => {
    Recommendlist().then(res => {
      setData(res.data.data)
    })
    SetCarList()
  }, [])
  const SetCarList = () => {
    CarList({ userid: userId }).then(res => {
      if (res.data.code === '200') {
        console.log(res);
        setCarList(res.data.data)
        let a = 0
        res.data.data.map(item => {
          if (item.flag) {
            a += item.num * item.originprice
          }
        })
        setPrices(a + '00')
        setIsShow(true)
      }else{
        setIsShow(false)
      }
    })
  }
  const Submit = () => {
  }
  const input = (cartid, val) => {
    console.log(cartid, val);
    Selectone({ cartid, flag: val }).then(res => {
      // console.log(res);
      if (res.data.code === '200') {
        SetCarList()
      }
    })
  }
  const inputAll = (val) => {
    console.log(val);
    Selectall({ userid: userId, type: val }).then(res => {
      // console.log(res);
      if (res.data.code === '200') {
        SetCarList()
      }
    })
  }
  const add = (cartid, num) => {
    // console.log(cartid,num);
    Updatenum({ cartid, num: num + 1 }).then(res => {
      // console.log(res);
      if (res.data.code === '200') {
        SetCarList()
      }
    })
  }
  const rem = (cartid, num) => {
    // console.log(cartid,num);
    Updatenum({ cartid, num: num - 1 }).then(res => {
      // console.log(res);
      if (res.data.code === '200') {
        SetCarList()
      }
    })
  }
  const del = (cartid) => {
    // console.log(111);
    DEL({ cartid }).then(res => {
      if (res.data.code === '200') {
        Toast.show({
          icon:'success',
          content:'删除成功',
          afterClose:SetCarList()
        })
      }
    })
  }
  return (
    <div>
      <NavBar
        title={`购物车`}
        leftText="返回"
        onClickLeft={() => navigate(-1)}
      />
      {!isShow && <Empty description="购物车无内容">
        <Button onClick={() => navigate('/home')} style={{ width: 160, backgroundColor: 'rgb(238,10,36)', border: 'none' }} round type="primary">
          立即购物
        </Button>
      </Empty>}

      {isShow && <ul className='carlist-box'>
        {
          catList.map(item => {
            return <li key={item.cartid}>
              <Checkbox checked={item.flag} onChange={val => input(item.cartid, val)} />
              <SwipeCell
                rightAction={

                  <Button onClick={() => del(item.cartid)} style={{ height: '100%' }} square type="danger">
                    删除
                  </Button>
                }
              >
                <Flex className="demo-product-card" align="stretch">
                  <Image src={item.img1} className="demo-product-card__img" />
                  <Flex direction="column" justify="between" className="demo-product-card__content">
                    <div>
                      <Typography.Text type="secondary">{item.proname}</Typography.Text>
                    </div>
                    <Flex justify="between" align="center">
                      <Typography.Text strong size="lg">
                        ￥{item.originprice}
                      </Typography.Text>
                      <Typography.Text size="sm" type="secondary">
                        <button className='car-rem' onClick={() => rem(item.cartid, item.num)}>-</button>
                        <span className='car-sum'>{item.num}</span>
                        <button className='car-add' onClick={() => add(item.cartid, item.num)}>+</button>
                      </Typography.Text>
                    </Flex>
                  </Flex>
                </Flex>
              </SwipeCell>
            </li>
          })
        }
      </ul>}
      <div className='car-title'>可能你还想要</div>
      <ul className='tj-list'>
        {
          data.map(item => {
            return <li onClick={() => navigate("/detail/" + item.proid)} key={item.proid}>
              <img className='tj-img' src={item.img1} />
              <p className='tj-desc'>{item.proname}</p>
              <p className='tj-price'>￥{item.originprice}</p>
            </li>
          })
        }
      </ul>

      <SubmitBar
        price={price}
        buttonText="提交订单"
        onSubmit={Submit}
      >
        <Checkbox checked={catList.every(item => item.flag)} onChange={val => inputAll(val)}>全选</Checkbox>
      </SubmitBar>
    </div>
  )
}
